import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './Badge.stories';

<Meta of={Stories} />

# Badge

<Status variant="stable" />

Badges are non-actionable elements in the UI, used to indicate the status of an object.

<Story of={Stories.Base} />
<Props />

## Best practices

- Use our colour patterns so that users can learn and identify status at a glance.
- Create a clear label with a short, scannable text.
- Position a badge so that it is obvious what content the status is related to.

## Usage guidelines

- **Do** use badges to indicate the status of data rows in a table.
- **Do** use badges to bring attention to a specific area on the screen (like a new feature).
- **Do not** use badges to indicate default statuses (e.g. in the Transaction History, a transaction should only include a status if it's anything other than default; failed, refunded, paid out, etc.)

## Component variations

### Variants

The badges come in a number of variants based on their semantic meaning.

<Story of={Stories.Variants} />

### Circular badges

Badges that receive the `circle` prop can be used to indicate notifications.

<Story of={Stories.Circular} />
